<template>
  <page-frame>
    <div class="order-management">
      <div class="toptitle">
        <div class="left">职务管理</div>
        <div class="right">
          <div class="btns">
            <el-button @click="addRole" class="lightGreenBtn">新增职务</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="order-content">
        <div class="input">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @row-dblclick="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="职务名称"
              width="400">
            </el-table-column>
            <el-table-column
              prop="description"
              label="职务描述"
              width="">
            </el-table-column>
            <el-table-column
              label="操作"
              width="150">
              <template scope="scope">
                <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import roleApi from '../../service/corporation/roleApi'
  export default {
    methods: {
      init(){
        this.loadTableData();
      },
      //加载页面数据
      loadTableData(){
        let self = this;
        roleApi.getRoleList().then(
          (response)=>{
            self.tableData = response.data.data;
          }
        );
      },
      //新增职务
      addRole(){
        this.$router.push({name:"addRole",params:{way:1,id:-1}});
      },
      //编辑职务
      edit(row){
        this.$router.push({name:"addRole",params:{way:2,id:row.id}});
      },
      //删除职务
      del(row){
        this.$confirm('确定删除该职务', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          roleApi.deleteRole(row.id).then(
            (response)=>{
              console.log(response.data.status);
              if(response.data.status==200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.loadTableData();
              }
            }
          );
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //职务详情
      handleCurrentChange(val) {//职务详情
        this.$router.push({name:"addRole",params:{way:0,id:val.id}});
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        tableData: [],
      }
    }
  }
</script>
<style>

</style>
